<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend></legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="输入用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i
                                    class="layui-icon"></i> 搜 索
                            </button>
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-add-btn"><i
                                    class="fa fa-plus"></i> 添 加
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container"></div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">

            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit"
               {{(d.carName=='暂无')?'style="cursor:not-allowed"':'lay-event="Parking"'}}>停用车位</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-edit"
               {{(d.roomName=='暂无')?'style="cursor:not-allowed"':'lay-event="house"'}}>停用房屋</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-choosehouse" lay-event="choosehouse">房屋分配</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-chooseParking"
               lay-event="chooseParking">车位分配</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-Payment" lay-event="Payment">缴费管理</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<!-- 添加表单弹窗 -->
<script type="text/html" id="modelAdd">
    <form id="modelAddForms" lay-filter="modelAddForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="手机号" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" id="sex" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择性别</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset" id="closeBtn">取消</button>
                <button class="layui-btn" lay-filter="modelSubmitAdd" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>


<!-- 修改表单弹窗 -->
<script type="text/html" id="modelEdit">
    <form id="modelEditForms" lay-filter="modelEditForm" class="layui-form model-form">
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input name="username" id="username" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input name="phone" id="phone" placeholder="输入手机号" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" class="sex" lay-verType="tips" lay-verify="required" required>
                    <option value="-1">请选择性别</option>
                    <option value="0" class="sex">男</option>
                    <option value="1" class="sex">女</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<%--停用车位表单弹窗--%>
<script type="text/html" id="modelStopCarEdit">
    <form id="modelEditStopCarForms" lay-filter="modelEditStopCarForms" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">停用车位</label>
            <div class="layui-input-block">
                <select name="id" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择停用车位</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>


<%--停用房屋表单弹窗--%>
<script type="text/html" id="modelStopHouseEdit">
    <form id="modelEditStopHouseForms" lay-filter="modelEditStopHouseForm" class="layui-form model-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">停用房屋</label>
            <div class="layui-input-block">
                <select name="id" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择停用房屋</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>


<!-- 修改房屋分配弹窗 -->

<script type="text/html" id="modifyHouse">
    <form id="modifyHouseForms" lay-filter="modifyHouseForm" class="layui-form model-form">
        <input type="hidden" name="userId">
        <div class="layui-form-item">
            <label class="layui-form-label">单元</label>
            <div class="layui-input-block">
                <select name="danyuanId" lay-verType="tips" lay-verify="required" required lay-filter="parentCategory">
                    <option value="">请选择单元</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">空闲房间</label>
            <div class="layui-input-block">
                <select name="roomId" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择空闲房间</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<!-- 修改车位分配弹窗 -->
<script type="text/html" id="modifyCar">
    <form id="modifyCarForms" lay-filter="modifyCarForms" class="layui-form model-form">
        <input type="hidden" name="userId">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="typeId" lay-verType="tips" lay-verify="required" required lay-filter="parentCategory">
                    <option value="">请选择类型</option>
                    <option value="0">地上</option>
                    <option value="1">地下</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">空闲车位</label>
            <div class="layui-input-block">
                <select name="carId" lay-verType="tips" lay-verify="required" required>
                    <option value="">请选择空闲车位</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>

<!-- 缴费管理弹窗 -->
<script type="text/html" id="modifyPayment">
    <form id="modifyPaymentForms" lay-filter="modifyPaymentForms" class="layui-form model-form">
        <input name="userId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="paymentId" lay-verify="required" lay-filter="paymentCategory">
                    <option value="">请选择收费类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">费用</label>
            <div class="layui-input-block">
                <input name="value" class="layui-input" type="text" placeholder="输入费用"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
            </div>
        </div>
    </form>
</script>



<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/sessionTimout.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 表格渲染
        table.render({
            elem: '#currentTableId',
            url: '/userMgrServlet?opt=list',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'id', width: 80, title: '#', type: 'numbers'},
                {field: 'username', title: '用户名'},
                {field: 'phone', title: '手机号'},
                {
                    field: 'sex', title: '性别', templet: function (d) {
                        return `<input type="checkbox" lay-text="男|女" lay-skin="switch" \${d.sex==1?'checked':''} disabled>`
                    }
                },
                {field: 'carName', title: '车位'},
                {field: 'roomName', title: '房屋'},
                {field: 'userCarList', title: '隐藏域', hide: true},
                {field: 'userRoomList', title: '隐藏域', hide: true},
                {title: '操作', minWidth: 510, toolbar: '#currentTableBar', align: "center"}

            ]],
            limits: [4, 8, 10, 15, 20],
            limit: 4,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {  // data 表单数据对象 name键 value值
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    name: data.field.name
                }
            }, 'data');
            return false;
        });

        // 监听添加操作
        form.on('submit(data-add-btn)', function (data) {  // data 表单数据对象 name键 value值
            // 打开添加对话框
            showAddModel();
            return false;
        });

        // 显示添加表单弹窗
        function showAddModel() {
            // 打开弹窗
            layer.open({
                type: 1,
                title: '添加用户',
                content: $('#modelAdd').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.render();
                    form.on('submit(modelSubmitAdd)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgrServlet?opt=add',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }

        // 监听操作
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log(obj)
            if (obj.event === 'edit') {
                showEditModel(data);
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm(`确定要删除用户\${data.username}吗?`, function (index) {
                    $.getJSON('/userMgrServlet?opt=delete', `id=\${data.id}`, function (data) {
                        if (data.code == 0) {
                            layer.close(index);
                            layer.msg(data.msg, {icon: 1});
                            // 刷新数据
                            table.reload('currentTableId')
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    })

                });
            } else if (obj.event === 'Parking') {
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '停用车位',
                    content: $('#modelStopCarEdit').html(),
                    success: function (layero, dIndex) {
                        // 加载用户车位
                        if (data.userCarList.length > 0) {
                            for (let i = 0; i < data.userCarList.length; i++) {
                                let userCar = data.userCarList[i]
                                let option = `<option value="\${userCar.id}">\${userCar.carname}</option>`
                                $('#modelEditStopCarForms [name=id]').append(option)
                            }
                            // 渲染表单控件
                            form.render();
                            $(layero).children('.layui-layer-content').css('overflow', 'visible');
                            // 表单提交事件
                            form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                                layer.load(2);
                                $.ajax({
                                    url: '/userMgrServlet?opt=stopCar',
                                    type: "POST",
                                    data: data.field,
                                    dataType: "json",
                                    success: function (data) {
                                        layer.closeAll('loading');
                                        if (data.code == 0) {
                                            layer.close(dIndex);
                                            layer.msg(data.msg, {icon: 1});
                                            // 刷新表格
                                            //执行搜索重载
                                            table.reload('currentTableId')
                                        } else {
                                            layer.msg(data.msg, {icon: 2});
                                        }
                                    }
                                })
                                return false;
                            });
                        }
                    }
                });

            } else if (obj.event === 'house') {
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '停用房屋',
                    content: $('#modelStopHouseEdit').html(),
                    success: function (layero, dIndex) {
                        // 加载用户房屋
                        if (data.userRoomList.length > 0) {
                            for (let i = 0; i < data.userRoomList.length; i++) {
                                let room = data.userRoomList[i]
                                let option = `<option value="\${room.id}">\${room.roomName}</option>`
                                $('#modelEditStopHouseForms [name=id]').append(option)
                            }
                            // 渲染表单控件
                            form.render();
                            $(layero).children('.layui-layer-content').css('overflow', 'visible');
                            // 表单提交事件
                            form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                                layer.load(2);
                                $.ajax({
                                    url: '/userMgrServlet?opt=stopRoom',
                                    type: "POST",
                                    data: data.field,
                                    dataType: "json",
                                    success: function (data) {
                                        layer.closeAll('loading');
                                        if (data.code == 0) {
                                            layer.close(dIndex);
                                            layer.msg(data.msg, {icon: 1});
                                            // 刷新表格
                                            //执行搜索重载
                                            table.reload('currentTableId')
                                        } else {
                                            layer.msg(data.msg, {icon: 2});
                                        }
                                    }
                                })
                                return false;
                            });
                        }
                    }
                });
            } else if (obj.event === 'choosehouse') {  //分配房屋
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '房屋分配',
                    content: $('#modifyHouse').html(),
                    success: function (layero, dIndex) {
                        // 赋值用户ID
                        $("#modifyHouseForms [name='userId']").val(data.id);
                        // 加载空闲单元
                        $.ajax({
                            url: '/DanyuanServlet?opt=danyuan',
                            dataType: 'json',
                            type: 'get',
                            async: false,
                            success: function (res) {
                                if (res.code == 0) {
                                    for (var i in res.data) {
                                        let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                        $("#modifyHouseForms [name='danyuanId']").append(option);
                                    }
                                }
                                form.render()
                            }
                        })
                        // 选择单元后动态加载房屋信息
                        form.on('select(parentCategory)', function (res) {
                            $.ajax({
                                url: '/RoomServlet?opt=danyuan&did=' + res.value,
                                dataType: 'json',
                                type: 'get',
                                async: false,
                                success: function (res) {
                                    if (res.code == 0) {
                                        for (var i in res.data) {
                                            let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                            $("#modifyHouseForms [name='roomId']").append(option);
                                        }
                                    }
                                    form.render()
                                }
                            })
                        });
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        // 表单提交事件
                        form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                            layer.load(2);
                            $.ajax({
                                url: '/userMgrServlet?opt=addRoom',
                                type: "POST",
                                data: data.field,
                                dataType: "json",
                                success: function (data) {
                                    layer.closeAll('loading');
                                    if (data.code == 0) {
                                        layer.close(dIndex);
                                        layer.msg(data.msg, {icon: 1});
                                        // 刷新表格
                                        //执行搜索重载
                                        table.reload('currentTableId')
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                    }
                                }
                            })
                            return false;
                        });
                    }
                });
            } else if (obj.event === 'chooseParking') {  //分配车位
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '车位分配',
                    content: $('#modifyCar').html(),
                    success: function (layero, dIndex) {
                        form.render()
                        // 赋值用户ID
                        $("#modifyCarForms [name='userId']").val(data.id);
                        // 选择地上、地下后动态加载车位信息
                        form.on('select(parentCategory)', function (res) {
                            $.ajax({
                                url: '/CarServlet?opt=type&type=' + res.value,
                                dataType: 'json',
                                type: 'get',
                                async: false,
                                success: function (res) {
                                    if (res.code == 0) {
                                        for (var i in res.data) {
                                            let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                            $("#modifyCarForms [name='carId']").append(option);
                                        }
                                    }
                                    form.render()
                                }
                            })
                        });
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        // 表单提交事件
                        form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                            layer.load(2);
                            $.ajax({
                                url: '/userMgrServlet?opt=addCar',
                                type: "POST",
                                data: data.field,
                                dataType: "json",
                                success: function (data) {
                                    layer.closeAll('loading');
                                    if (data.code == 0) {
                                        layer.close(dIndex);
                                        layer.msg(data.msg, {icon: 1});
                                        // 刷新表格
                                        //执行搜索重载
                                        table.reload('currentTableId')
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                    }
                                }
                            })
                            return false;
                        });
                    }
                });
            } else if (obj.event === 'Payment') {
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '缴费管理',
                    content: $('#modifyPayment').html(),
                    success: function (layero, dIndex) {
                        form.render()
                        // 赋值用户ID
                        $("#modifyPaymentForms [name='userId']").val(data.id);
                        // 加载缴费类型
                        $.ajax({
                            url: '/PaymentServlet?opt=Payment',
                            dataType: 'json',
                            type: 'get',
                            async: false,
                            success: function (res) {
                                if (res.code == 0) {
                                    for (var i in res.data) {
                                        let option = "<option value='" + res.data[i]['id'] + "'>" + res.data[i]['name'] + "</option>";
                                        $("#modifyPaymentForms [name='paymentId']").append(option);
                                    }
                                    form.render()
                                }

                            }
                        })
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        // 表单提交事件
                        form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                            layer.load(2);
                            $.ajax({
                                url: '/UserPaymentServlet?opt=addPayment',
                                type: "POST",
                                data: data.field,
                                dataType: "json",
                                success: function (data) {
                                    layer.closeAll('loading');
                                    if (data.code == 0) {
                                        layer.close(dIndex);
                                        layer.msg(data.msg, {icon: 1});
                                        // 刷新表格
                                        //执行搜索重载
                                        table.reload('currentTableId')
                                    } else {
                                        layer.msg(data.msg, {icon: 2});
                                    }
                                }
                            })
                            return false;
                        });
                    }
                });

            }
        });

        // 显示修改表单弹窗
        function showEditModel(data) {
            // 打开弹窗
            layer.open({
                type: 1,
                title: '修改用户',
                content: $('#modelEdit').html(),
                success: function (layero, dIndex) {
                    // 绑定数据 | ajax request
                    $('#id').val(data.id)
                    $('#username').val(data.username)
                    $('#phone').val(data.phone)
                    // $('.sex').val(data.sex)
                    if (data.sex === -1) {
                        $('.sex').eq(0).prop('selected', true)
                    } else if (data.sex === 0) {
                        $('.sex').eq(1).prop('selected', true)
                    } else {
                        $('.sex').eq(2).prop('selected', true)
                    }
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 表单提交事件
                    form.render();
                    form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
                        layer.load(2);
                        $.ajax({
                            url: '/userMgrServlet?opt=edit',
                            type: "POST",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.code == 0) {
                                    layer.close(dIndex);
                                    layer.msg(data.msg, {icon: 1});
                                    // 刷新表格
                                    //执行搜索重载
                                    table.reload('currentTableId')
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });
                }
            });
        }


    });
</script>

</body>
</html>